const colorList = ['#95a2ff', '#fa8080', '#ffc076', '#fae768', '#87e885', '#3cb9fc', '#73abf5', '#cb9bff', '#434348', '#90ed7d']

export default {
  components: {},
  props: {
    funnelWidth: {
      type: Number,
      default: 1200
    },
    funnelHeight: {
      type: Number,
      default: 400
    },
    funnelData: {
      type: Array
    },
    title: {
      type: String,
      default: '漏斗'
    }
  },
  data() {
    return {
      chartInstance: null
    }
  },
  // 在实例创建完成后被立即调用
  created() {
  },
  // 实例被挂在后调用
  mounted() {
    this.init()
  },
  // 方法
  methods: {
    init() {
      this.chartInstance = this.$echarts.init(this.$refs.echartsRef)

      let seriesData = this.initSeriesData()
      let legend = this.initLegendData()

      let option = {
        tooltip: {
          trigger: 'item',
          formatter: '{b} <br/> 商机个数: {c}'
        },
        legend: {
          data: legend
        },
        series: [
          {
            name: this.title,
            type: 'funnel',
            left: '10%',
            top: 60,
            bottom: 60,
            width: '80%',
            min: 0,
            max: 100,
            minSize: '10%',
            maxSize: '70%',
            sort: 'descending',
            gap: 2,
            label: {
              formatter: '{b}'
            },
            labelLine: {
              length: 10,
              lineStyle: {
                width: 1,
                type: 'solid'
              }
            },
            itemStyle: {
              borderColor: '#fff',
              borderWidth: 1
            },
            emphasis: {
              label: {
                fontSize: 20
              }
            },
            data: seriesData
          }
        ]
      }
      this.chartInstance.setOption(option)
    },
    // 初始化展示数据(series)
    initSeriesData() {
      let newSeries = []
      this.funnelData.forEach((item, index) => {
        newSeries.push({
          value: item.value,
          name: item.name
        })
      })
      return newSeries
    },
    // 初始化legend数据
    initLegendData() {
      let newLegend = []
      this.funnelData.forEach((item, index) => {
        newLegend.push(item.name)
      })
      return newLegend
    }
  }
}
